<template>
    <div class="shops-container">

        <div class="filter-container">

            <el-select
                v-model="districtFilter"
                placeholder="选择区域"
                clearable
                style="margin-left: 15px; width: 150px"
            >
                <el-option
                    v-for="district in districts"
                    :key="district"
                    :label="district"
                    :value="district"
                />
            </el-select>

            <el-button
                type="primary"
                style="margin-left: 15px"
                @click="handleReset"
            >
                重置
            </el-button>
        </div>

        <div class="shops-grid">
            <shop-card
                v-for="shop in filteredShops"
                :key="shop.id"
                :shop="shop"
                @click.native="goToShopDetail(shop.id)"
            />
        </div>

        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="filteredShops.length"
            @current-change="handlePageChange"
        />
    </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter} from 'vue-router'
import ShopCard from './shopcard'
import { mockShops } from '@/components/api/mockData.js'

const router = useRouter()

// 数据状态
const shops = ref([])
const searchQuery = ref('')
const districtFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(12)

// 模拟区域数据
const districts = ref([
    '朝阳区', '海淀区', '东城区', '西城区', '丰台区',
    '石景山区', '通州区', '昌平区', '大兴区'
])

// 获取商家数据
onMounted(async () => {
    shops.value = await mockShops()
})

// 过滤后的商家
const filteredShops = computed(() => {
    let result = shops.value

    // 按搜索词过滤
    if (searchQuery.value) {
        result = result.filter(shop =>
            shop.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
    }

    // 按区域过滤
    if (districtFilter.value) {
        result = result.filter(shop =>
            shop.district === districtFilter.value
        )
    }

    return result
})

// 分页数据
const paginatedShops = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return filteredShops.value.slice(start, end)
})

// 方法
const handleSearch = () => {
    currentPage.value = 1
}

const handleSearchClear = () => {
    searchQuery.value = ''
    currentPage.value = 1
}

const handleReset = () => {
    searchQuery.value = ''
    districtFilter.value = ''
    currentPage.value = 1
}

const handlePageChange = (page) => {
    currentPage.value = page
}

const goToShopDetail = (id) => {
    router.push({ name: 'shop-detail', params: { id } })
}
</script>

<style scoped>
.shops-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.filter-container {
    margin: 20px 0;
    display: flex;
    align-items: center;
}

.shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.el-pagination {
    margin-top: 20px;
    justify-content: center;
}
</style>